<template>
  <div>
    <basic-container>
      <avue-crud
        ref="scopeTree"
        :data="tableData"
        :option="option"
        :page="page"
        :destroy-on-close="true"
        @refresh-change="searchHandler"
        @row-update="rowUpdate"
        @search-change="searchChange"
        @on-load="onLoad"
        @search-reset="searchForm.classId = ''"
      >
      <template slot-scope="{ disabled, size }" slot="classIdSearch">
          <el-select
            placeholder="请选择查看班级"
            :disabled="disabled"
            :size="size"
            style="width: 200px"
            v-model="searchForm.classId"
          >
            <el-option
              v-for="item in classDictionary"
              :key="item.id"
              :label="item.className"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </template>
        <template slot="menuLeft">
          <el-button
            v-show="getPermissions('moralEducation_initialize')"
            @click="dialogVisible = true"
            size="small"
            type="primary"
            >初始化德育分</el-button
          >
          <el-dialog
            title="选择班级"
            :visible.sync="dialogVisible"
            width="450px"
            :before-close="handleClose"
            modal-append-to-body
            append-to-body
          >
            <div class="text">
              <i class="el-icon-s-flag"></i>
              &nbsp;初始化评分后将会重置本学期的数据
            </div>
            <span>班级名称：</span>
            <el-select
              v-model="classId"
              placeholder="请选择初始化班级"
              style="width: 300px"
              size="mini"
            >
              <el-option
                v-for="item in classDialog"
                :key="item.classId"
                :label="item.className"
                :value="item.classId"
              >
              </el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false" size="mini"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="gradeInitialize()"
                size="mini"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>
<script>
import {
  getMoralEducation,
  updateMoralEducation,
  InitializeMoralEducation,
} from "@/api/teacherPage/moralEducationBasic";
import { byTeacherKey } from "@/api/basicData/classTeacher";
import { baseUrl } from "@/config/env";
import { searchClass } from "@/api/basicData/class";

export default {
  name: "",
  data() {
    return {
      classId: "",
      classDialog: [],
      classDictionary: [],
      dialogVisible: false,
      page: {
        pageSize: 10,
        total: 10,
      },
      headers: {
        Authorization: "",
      },
      searchForm: {
        currentPage: 1,
        pageSizes: 10,
        classId: "",
      },
      tableData: [],
      option: {
        border: true,
        index: true,
        indexLabel: "序号",
        stripe: true,
        menuAlign: "center",
        editBtn: false,
        delBtn: false,
        addBtn: false,
        viewBtn: this.getPermission("moralEducation_get"),
        searchMenuSpan: 6,
        align: "center",
        cellBtn: this.getPermission("moralEducation_update"),
        column: [
          {
            label: "姓名",
            prop: "name",
          },
          {
            label: "学号",
            prop: "studentKey",
          },
          {
            label: "学期",
            display: false,
            prop: "termId",
            type: "select",
            remote: true,
            props: {
              label: "term",
              value: "id",
            },
            dicUrl: `${baseUrl}/pc/term/all`,
            rules: [
              {
                required: true,
                message: "学期不能为空",
                trigger: "blur",
              },
            ],
          },
          {
            label: "班级名称",
            prop: "classId",
            type: "select",
            hide: true,
            remote: true,
            searchslot: true,
            search: true,
            props: {
              label: "className",
              value: "id",
            },
            dicUrl: `${baseUrl}/pc/stu-class/byName`,
            rules: [
              {
                required: true,
                message: "所属班级不能为空",
                trigger: "blur",
              },
            ],
          },
          {
            label: "所属班级",
            prop: "classStr",
            addDisplay: false,
            editDisplay: false,
          },
          {
            label: "是否坚持四项基本原则",
            prop: "fourPrinciple",
            labelWidth: 170,
            width: 150,
            type: "switch",
            cell: true,
            dicData: [
              {
                label: "否",
                value: false,
              },
              {
                label: "是",
                value: true,
              },
            ],
          },
          {
            label: "是否遵守社会公德",
            prop: "doMoral",
            labelWidth: 150,
            width: 130,
            type: "switch",
            cell: true,
            dicData: [
              {
                label: "否",
                value: false,
              },
              {
                label: "是",
                value: true,
              },
            ],
          },
          {
            label: "是否践行社会主义核心价值观",
            prop: "doCoreValue",
            labelWidth: 200,
            width: 180,
            type: "switch",
            cell: true,
            dicData: [
              {
                label: "否",
                value: false,
              },
              {
                label: "是",
                value: true,
              },
            ],
          },
        ],
      },
    };
  },
  mounted() {
    searchClass().then((res) => {
      this.classDictionary = res.data;
      console.log(this.classDictionary[0].id);
      this.searchForm.classId = this.classDictionary[0].id;
      this.searchHandler();
    });
    byTeacherKey().then((res) => {
      console.log(res);
      this.classDialog = res.data;
    });
  },
  methods: {
    getPermissions(value) {
      return this.getPermission(value);
    },
    searchHandler() {
      if (
        this.searchForm.classId == undefined ||
        this.searchForm.classId == ""
      ) {
        return;
      }
        getMoralEducation(this.searchForm).then((res) => {
          this.page.pageSizes = res.data.pageSizes;
          this.page.total = res.data.total;
          this.tableData = res.data.records;
        });
    },
    onLoad(page) {
      this.searchForm.currentPage = page.currentPage;
      this.searchForm.pageSize = page.pageSize;
      this.searchHandler();
    },
    rowUpdate(form, index, done, loading) {
      loading();
      updateMoralEducation(form).then(() => {
        this.$message.success("更新成功");
        this.searchHandler();
        done();
      });
    },
    searchChange(params, done) {
      console.log(this.searchForm.classId);
      this.searchHandler();
      done();
    },
    gradeInitialize() {
      console.log(this.classId);
      if (this.classId) {
        this.dialogVisible = false;
        InitializeMoralEducation(this.classId).then((res) => {
          this.searchForm.classId = this.classId;
          if (res.message == "操作成功") {
            this.$message.success("初始化成功");
            this.searchHandler();
          }
        });
      } else {
        this.$message({
          message: "请选择班级",
          type: "info",
        });
      }
    },
  },
};
</script>

<style>
.text {
  color: rgb(187, 118, 118);
  padding-bottom: 20px;
}
</style>
